<template>
    <div class="editPassWord">
        <span class="title">修改密码</span>
        <el-form
            :model="passWordForm"
            status-icon
            :rules="rules"
            ref="passWordForm"
            label-width="140px"
            label-position="left"
            @submit.native.prevent
            class="editPassWordForm"
        >
            <el-form-item label="原密码" prop="passwordOld">
                <el-input type="password" v-model="passWordForm.passwordOld" maxlength="20" placeholder="请输入"></el-input>
            </el-form-item>
            <el-form-item label="输入新密码" prop="passwordNew" class="newPassword">
                <el-input
                    type="password"
                    v-model="passWordForm.passwordNew"
                    placeholder="请输入"
                   maxlength="20"
                ></el-input>
                <span class="tips">{{tipMessage}}</span>
            </el-form-item>
            <el-form-item label="再次输入新密码" prop="checkPassWord">
                <el-input type="password" maxlength="20" v-model="passWordForm.checkPassWord" placeholder="请输入"></el-input>
            </el-form-item>
            <div>
                <button @click="submitForm('passWordForm')" class="formBtn saveBtn">保存</button>
                <button @click="resetForm('passWordForm')" class="formBtn cancelBtn">取消</button>
            </div>
        </el-form>
    </div>
</template>
<script>
// import { editPassword } from '@/api/index.js';
import { userLogin, changePassWord, getProjectList } from '@/api/index.js';
export default {
    data() {
        // 密码格式正则表达式(6~20位，数字+字母)
        let patter = /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,20}$/;
        // let lowRegex1=new RegExp
        // let strongRegex = new RegExp('^(?=.{8,})(?=.*[A-Z])(?=.*[a-z])(?=.*[0-9])(?=.*\\W).*$', 'g'); //强
        // let mediumRegex = new RegExp('[da-zA-Z]*d+[a-zA-Z]+[da-zA-Z]* ','g'); //中
        

        //原密码校验
        var validatePass = (rule, value, callback) => {
            if (value === '') {
                callback(new Error('请输入原密码'));
            } else {
                if (this.passWordForm.passwordNew !== '') {
                    this.$refs.passWordForm.validateField('passwordNew');
                }
                callback();
            }
        };
        //输入新密码第一次校验
        var validatePass2 = (rule, value, callback) => {
            if (value === '') {
                callback(new Error('请输入新密码'));
            } else {
                if (!patter.test(value)) {
                    return callback(new Error('请输入6-20位密码，至少使用字符、数字组合'));
                } else {
                    // callback();
                    if (value === this.passWordForm.passwordOld) {
                        callback(new Error('新密码和旧密码不能重复'));
                    } else {
                        if (this.passWordForm.checkPassWord !== '') {
                            this.$refs.passWordForm.validateField('checkPassWord');
                        }
                    }
                }
                callback();
            }
        };

        //输入新密码第二次校验
        var validatePass3 = (rule, value, callback) => {
            if (value === '') {
                callback(new Error('请再次输入新密码'));
            } else if (value !== this.passWordForm.passwordNew) {
                callback(new Error('两次输入密码不一致!'));
            } else {
                callback();
            }
        };
        return {
            passWordForm: {
                passwordOld: '',
                passwordNew: '',
                checkPassWord: ''
            },
            rules: {
                passwordOld: [{ validator: validatePass, trigger: 'blur' }],
                passwordNew: [{ validator: validatePass2, trigger: 'blur' }],
                checkPassWord: [{ validator: validatePass3, trigger: 'blur' }]
            },
            tipMessage: '' //密码强度提示信息
        };
    },
    methods: {
        //修改密码表单提交
        submitForm(formName) {
            this.$refs[formName].validate(valid => {
                if (valid) {
                    // this.passWordForm.push({"userid":localStorage.getItem('userid')})
                    console.log(this.passWordForm);
                    let passWordForm = {
                        passwordOld: this.$md5(this.passWordForm.passwordOld),
                        passwordNew: this.$md5(this.passWordForm.passwordNew),
                        userid: localStorage.getItem('userid')
                    };
                    changePassWord(passWordForm).then(res => {
                        if (res.code === 200) {
                            this.$message.success('身份信息已更新,请重新登录');
                            this.$Cookies.remove('account');
                            this.$Cookies.remove('password');
                            localStorage.clear();
                            this.$router.push('/');
                        } else {
                            this.$message.error(res.message);
                        }
                    });
                } else {
                    return false;
                }
            });
        },

        //取消修改密码
        resetForm(formName) {
            this.$refs[formName].resetFields();
        },
        //校验修改后的密码
        RegPassWord() {
            this.$nextTick(() => {
                if (this.passWordForm.passwordNew !== null) {
                    if (strongRegex.test(this.passWordForm.passwordNew)) {
                        this.tipMessage = '密码强度：高';
                    } else if (mediumRegex.test(this.passWordForm.passwordNew)) {
                        this.tipMessage = '密码强度：中';
                    } else {
                        this.tipMessage = '';
                    }
                } else {
                    this.tipMessage = ' ';
                }
            });
        }
    }
};
</script>
<style lang="scss" >
.editPassWord {
    margin-left: 80px;
    margin-top: 125px;

    // border: 1px solid #000;
    .title {
        display: inline-block;
        width: 80px;
        height: 28px;
        font-size: 20px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: #333333;
        line-height: 28px;
        margin-bottom: 55px;
    }
    .editPassWordForm {
        font-size: 16px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: rgba(51, 51, 51, 1);
        .el-input {
            // position:relative;
            .el-input__inner {
                width: 295px;
                height: 35px;
                padding-left: 20px;
                border-radius: 0;
            }
            .el-input__suffix {
                display: none;
            }
        }

        .el-form-item__label {
            color: #333;
            font-size:16px;
            font-weight: 400;

        }
        .formBtn {
            width: 90px;
            height: 35px;
            line-height: 35px;
            text-align: center;
            border: none;
            outline: none;
            border-radius: 5px;
            font-size: 16px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            margin-top: 46px;
        }
        .saveBtn {
            background: #004fab;
            color: #fff;
            margin-right: 44px;
        }
        .cancelBtn {
            color: #004fab;
            background: #c5d5e7;
        }
    }
    .newPassword {
        position: relative;
        .tips {
            position: absolute;
            left: 325px;
            top: 0px;
            color: #f56c6c;
        }
    }
}
</style>